<!--  -->
<template>
  <div class='padding20 newExper'>
    <el-steps :active="active">
      <el-step title="基本信息" description="请填写实验基本信息"></el-step>
      <el-step title="申请资源" description="为实验申请资源"></el-step>
      <el-step title="构建拓扑" description="构建实验网络拓扑"></el-step>
    </el-steps>
    <div v-show='active ==1'>
      <FormSearch ref="searchFrom" :formItem="searchItem" :formData.sync="searchData" :isInLine="false" labelWidth='160px' @selectChange="selectChange"/>
    </div>
    <div v-show='active ==2'>
      <applyResources ref='applyResources' />
    </div>
    <div v-show='active ==3'>
      <experReview />
    </div>
    <div class="bottmButton textAlign">
      <el-button @click='cancel'>取消</el-button>
      <el-button type="primary" @click="goLast" v-if='active>1'>上一步</el-button>
      <el-button type="primary" @click="goNext(active)" v-if='active !=3'>下一步</el-button>
      <el-button type="primary" @click="submit" v-if='active ==3'>提交</el-button>
    </div>
  </div>
</template>
<script>
import util from "./components/util.js";
import applyResources from "./applyResources";
import experReview from "./newTopology";
import experApi from "./api/exper.service";
// getFirstForm
export default {
  components: {
    applyResources,
    experReview
  },
  data() {
    return {
      active: 1,
      ...util.getFirstForm(),
      thisExperType: [],
      thisVeriType: []
    };
  },

  mounted() {
    // this.getExperType();
    this.resultApl();
    this.getTechVeri();

  },
  computed: {},
  watch: {},
  methods: {
    selectChange(value, args) {
      if (value) {
        // 如果选中了实验模型，调用对应的实验类型的接口
        if (args == 'verifyGroup') {
          let veriType = this.thisVeriType[value -1]
          this.getExperType(veriType)
        } else if(args == 'expGroup') {
          this.searchData.expGroups = this.thisExperType[value - 1]
        }
      }
    },
    async getExperType(veriType) {
      let { data } = await experApi.experTypeByName(veriType);
      this.searchItem.find(it => it.prop == "expGroup").list = data.map(it => {
        return {
          label: it.label,
          id: it.value
        };
      });
      this.thisExperType = data.map(it => {
        return it.label;
      });
    },
    async getTechVeri() {
      let { data } = await experApi.techVeri();
      this.searchItem.find(it => it.prop == "verifyGroup").list = data.map(it => {
        return {
          label: it.label,
          id: it.value
        };
      });
      this.thisVeriType = data.map(it => {
        return it.type;
      });
    },
    async resultApl() {
      let { data } = await experApi.resultApl();
      this.searchItem.find(it => it.prop == "resSubway").list = data.map(it => {
        return {
          label: it.label,
          id: it.value
        };
      });
    },
    goLast() {
      this.active--;
    },
    // 下一步
    goNext(active) {
      if (active == 1) {
        this.$refs.searchFrom.$refs.formSearch.validate(async (valid) => {
          if (valid) {
            this.active++;        
          } else {
            return;
          }
        });
      } else {
        this.active++;
      }
    },
    async submit() {
      let obj = {
        formData: {
          ...this.$funUtil.filterObjAttribute(this.searchData, "time")
        },
        resourceData: this.$refs.applyResources.multiSelection.map(it => {
          return {
            name: it.name,
            resType: it.resType,
            resId: it.id,
            count: it.count
          };
        }),
        topoData: {}
      };
      let data = await experApi.add(obj);
      if(data.code = 10200){
        // this.$message.success('添加实验成功')
        this.$message({
          type: "success",
          message: "添加实验成功",
          duration: 500,
          onClose: () =>{
            this.cancel();
          }
        });
      } else {
        this.$message.success('添加实验失败')
      }
    },
    cancel() {
      this.active = 1;
      this.$refs.searchFrom.resetFields();
      this.$refs.applyResources.clearForm();
      this.$emit('cancelCall');
    },
  },
  created() {}
};
</script>
<style lang='less' scoped>
.newExper {
  margin: auto;
  /deep/ .el-step__main {
    margin-top: -30px;
    margin-left: 31px;
  }
  /deep/ .el-step.is-horizontal .el-step__line {
    margin-left: 110px;
  }
  /deep/ .el-step__head.is-finish {
    .el-step__icon.is-text {
      background: #1890ff;
      color: white;
    }
  }
  /deep/ .el-step__title.is-finish {
    font-size: 18px;
    color: #000000d8;
    font-weight: 700;
  }
  /deep/ .el-step__description.is-finish {
    color: #8d8d8d;
  }
}
</style>
<style lang="less">
.newExper .el-form-item__label{
  padding: 0;
}
</style>